<template>
  <!--  <el-card class="layout-query">-->
  <!--    <el-form ref="queryRef" :inline="true" :model="state.queryForm" @keyup.enter="getDataList()">-->
  <!--      <el-form-item prop="deviceType">-->
  <!--        <el-input v-model="state.queryForm.deviceType" placeholder=""></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item>-->
  <!--        <el-button icon="Search" type="primary" @click="getDataList()">查询</el-button>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item>-->
  <!--        <el-button icon="RefreshRight" @click="reset(queryRef)">重置</el-button>-->
  <!--      </el-form-item>-->
  <!--    </el-form>-->
  <!--  </el-card>-->
  <!--  <el-card>-->
  <el-space>
    <el-space size="large">
      <el-button v-auth="'gps:command_type:save'" icon="Plus" type="primary" @click="addOrUpdateHandle()">新增指令</el-button>
    </el-space>
    <el-space>
      <el-button v-auth="'gps:command_type:delete'" icon="Plus" type="primary" @click="importDirectives(props.propsId)">一键导入指令</el-button>
    </el-space>
  </el-space>
  <el-table v-loading="state.dataListLoading" :data="props.data" border class="layout-table" @selection-change="selectionChangeHandle">
    <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
    <el-table-column prop="predictCmdId" label="序号" header-align="center" align="center"></el-table-column>
    <el-table-column prop="cmdName" label="指令名称" header-align="center" align="center"></el-table-column>
    <el-table-column prop="cmdDescr" label="描述" header-align="center" align="center"></el-table-column>
    <el-table-column label="同步命令" header-align="center" align="center">
      <template #default="scope">
        <el-tag v-if="scope.row.sync" type="success">是</el-tag>
        <el-tag v-else type="danger">否</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
      <template #default="scope">
        <el-button v-auth="'gps:command_type:update'" type="primary" link @click="addOrUpdateHandle(scope.row.predictCmdId)">修改</el-button>
        <el-button v-auth="'gps:command_type:delete'" type="primary" link @click="deleteList(scope.row.predictCmdId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 弹窗, 新增 / 修改 -->
  <add-or-update ref="addOrUpdateRef"></add-or-update>
  <!--  </el-card>-->
</template>

<script setup lang="ts" name="GpsCommand_typeIndex">
import { useCrud } from '@/hooks'
import { reactive, ref } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import AddOrUpdate from './add-or-update.vue'
import {  getAllCommand, deleteCommandType } from '@/api/gps/command_type'
import {  importCommand } from '@/api/gps/command'
import { ElMessage } from 'element-plus'
const state: IHooksOptions = reactive({
  // dataListUrl: '/gps/command_type/allCmd',
  // deleteUrl: '/gps/command_type',
  queryForm: {
    deviceType: ''
  }
})
const addOrUpdateRef = ref()
const emit = defineEmits(['refreshDataList'])
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id)
}
const props = defineProps({
  data: {
    type: Array,
    default: [] as any[]
  },
  propsId:String
})
function deleteList(id) {
    deleteCommandType(id).then(() => {
      ElMessage.success({
        message: '操作成功',
        duration: 500,
        onClose: () => {
          emit('refreshDataList')
        }
      })
    })
}
//导入指令
function importDirectives(id) {
  console.log(id)
  importCommand({ prodId: id }).then(() => {
    ElMessage.success({
      message: '操作成功',
      duration: 500,
      onClose: () => {
        emit('refreshDataList')
      }
    })
  })
  emit('refreshDataList')
}
const { selectionChangeHandle } = useCrud(state)
</script>
